<template>
  <div class="map-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>腾讯地图示例</span>
        </div>
      </template>
      
      <!-- 腾讯地图容器 -->
      <tlbs-map
        ref="mapRef"
        :center="center"
        :zoom="zoom"
        :control="control"
        @click="handleMapClick"
        @map_inited="onMapInited"
      >
        <tlbs-multi-marker
          ref="markerRef"
          :geometries="markers"
          :styles="markerStyles"
          @click="onMarkerClick"
        />
      </tlbs-map>
      
      <div class="controls">
        <el-button type="primary" @click="addMarker">添加标记</el-button>
        <el-button type="success" @click="drawPath">绘制路径</el-button>
        <el-button type="warning" @click="clearMarkers">清除标记</el-button>
        <el-button @click="resetMap">重置地图</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 地图引用
const mapRef = ref(null)
const markerRef = ref(null)

// 地图控制参数
const center = ref({ lat: 39.908823, lng: 116.397470 }) // 默认北京中心
const zoom = ref(13)
const control = ref({
  scale: {},
  zoom: {
    position: 'topRight',
  }
})

// 标记点样式
const markerStyles = ref({
  'normal': {
    width: 25,
    height: 35,
    anchor: { x: 12.5, y: 35 },
    src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker.png'
  }
})

// 标记点数据
const markers = ref([])
let infoWindow = null

// 地图初始化完成
const onMapInited = () => {
  console.log('地图加载完成', mapRef.value.map)
  // 添加默认标记点
  addDefaultMarker()
  
  // 创建信息窗口
  infoWindow = new TMap.InfoWindow({
    map: mapRef.value.map,
    content: '',
    offset: { x: 0, y: -35 }
  })
  
  // 隐藏信息窗口
  infoWindow.close()
}

// 添加默认标记点
const addDefaultMarker = () => {
  const defaultMarker = {
    id: 'marker-1',
    position: { lat: center.value.lat, lng: center.value.lng },
    properties: {
      title: '北京市中心'
    },
    styleId: 'normal'
  }
  
  markers.value.push(defaultMarker)
}

// 添加标记
const addMarker = () => {
  if (!mapRef.value) return
  
  const id = `marker-${markers.value.length + 1}`
  const lat = center.value.lat + (Math.random() - 0.5) * 0.05
  const lng = center.value.lng + (Math.random() - 0.5) * 0.05
  
  const newMarker = {
    id: id,
    position: { lat, lng },
    properties: {
      title: `标记点 ${markers.value.length + 1}`
    },
    styleId: 'normal'
  }
  
  markers.value.push(newMarker)
  ElMessage.success('添加标记成功')
}

// 绘制路径
const drawPath = () => {
  ElMessage.info('路径绘制功能待实现')
  // 这里可以实现路径绘制逻辑
}

// 清除标记
const clearMarkers = () => {
  markers.value = []
  if (infoWindow) infoWindow.close()
  ElMessage.warning('已清除所有标记')
}

// 重置地图
const resetMap = () => {
  if (!mapRef.value) return
  
  // 重置地图中心和缩放级别
  mapRef.value.map.setCenter(new TMap.LatLng(center.value.lat, center.value.lng))
  mapRef.value.map.setZoom(zoom.value)
  
  // 重置标记点
  markers.value = []
  addDefaultMarker()
  if (infoWindow) infoWindow.close()
  
  ElMessage.success('地图已重置')
}

// 处理地图点击事件
const handleMapClick = (evt) => {
  console.log('地图点击位置:', evt.latLng)
}

// 处理标记点点击事件
const onMarkerClick = (evt) => {
  const marker = evt.geometry
  showInfoWindow(marker)
}

// 显示标记点信息窗口
const showInfoWindow = (marker) => {
  if (!mapRef.value || !infoWindow) return
  
  const position = marker.position
  const title = marker.properties.title
  const content = `
    <div class="info-content">
      <h3>${title}</h3>
      <p>位置: 纬度 ${position.lat.toFixed(6)}, 经度 ${position.lng.toFixed(6)}</p>
    </div>
  `
  
  infoWindow.setContent(content)
  infoWindow.setPosition(new TMap.LatLng(position.lat, position.lng))
  infoWindow.open()
}
</script>

<style scoped>
.map-container {
  padding: 20px;
}

.tlbs-map {
  width: 100%;
  height: 500px;
  margin-bottom: 20px;
}

.controls {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  justify-content: center;
}

.info-content {
  padding: 5px;
}

.info-content h3 {
  margin: 0 0 10px 0;
  color: #333;
}

.info-content p {
  margin: 0;
  color: #666;
}
</style> 